<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			body {
				padding: 0;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: url(../img/1222.jpeg);
				background-size: cover;
				background-position: center;
			}

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40%;
				height: 300px;
				box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.05), 0 0.9px 1.7px rgba(0, 0, 0, 0.05), 0 1.8px 3.5px rgba(0, 0, 0, 0.06), 0 3.7px 7.3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.4);
				backdrop-filter: blur(5px);
				transition: 0.5s ease;
			}

			.box:hover {
				box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
			}

			.box .title {
				font-size: 50px;
				font-family: Lato, sans-serif;
				font-weight: 200;
				letter-spacing: 10px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h1 class="title">welcome to susu blog</h1>
		</div>
	</body>
</html>
